<template>
	<view class="container">
		<!-- 选择图片按钮 -->
		<button @click="chooseImage">选择图片</button>

		<!-- 图片预览区域 -->
		<view v-if="imagePath" class="image-preview">
			<image :src="imagePath" mode="aspectFill" class="preview-image"></image>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			imagePath: '' 
		};
	},
	methods: {
		// 选择图片
		chooseImage() {
			uni.chooseImage({
				count: 1,
				sizeType: ['compressed'],
				sourceType: ['album', 'camera'],
				success: (res) => {
					const tempFilePaths = res.tempFilePaths[0];
					this.imagePath = tempFilePaths;
					// 预览图片
					uni.previewImage({
						current: tempFilePaths,
						urls: [tempFilePaths]
					});
				},
				fail: (err) => {
					console.error('选择图片失败:', err);
				}
			});
		}
	}
};
</script>

<style>
.container {
	padding: 20px;
	text-align: center;
}

.image-preview {
	margin-top: 20px;
}

.preview-image {
	width: 300rpx;
	height: 300rpx;
	border-radius: 10rpx;
}
</style>